<template>
  <div>
    <!-- Navbar -->
    <navBar title="选择科室"></navBar>
    <van-tree-select class="tree" v-model:main-active-index="activeIndex" height="90.5vh" :items="items" @click-nav="onClickNav">
      <template #content>
        <ul class="list">
          <li v-for="item in currentDepList" :key="item.id" class="item" @click="onClick(item.id)">{{item.name}}</li>
        </ul>
      </template>
    </van-tree-select>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getDepList } from '@/api'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

const router = useRouter()
const store = useStore()

// 当前标签
const activeIndex = ref(0)
// 左侧导航栏数据
const items = ref([])

// 获取所有科室
const depList = ref([])
const fetchDepList = async () => {
  const { data } = await getDepList()
  depList.value = data
  currentDepList.value = data[0].child
  data.forEach(item => {
    items.value.push({ id: item.id, text: item.name })
  })
}
fetchDepList()

// 点击左侧导航
const currentDepList = ref([])
const onClickNav = (index) => {
  currentDepList.value = depList.value[index].child
}

// 点击右侧科室
const onClick = (id) => {
  router.push('/consult/illness')
  store.commit('illness/setDepId', id)
}
</script>

<style lang="scss" scoped>
::v-deep .van-sidebar-item__text {
  color: #848484;
}
::v-deep .van-sidebar-item--select {
  font-weight: normal;
  .van-sidebar-item__text {
    color: #121826;
  }
  &::before {
    content: unset;
  }
}
.tree{
  margin-top: 90px;
  .list {
    padding-left: 50px;
    line-height: 96px;
    color: #979797;
  }
}
</style>
